<style scoped lang="less">
	.demonstration{
		margin-right:15px;
		margin-left:15px;
	}
	.vipmassge{
		margin-right:15px ;
	}
	.el-button{
		margin-left: 15px;
	}
	.el-input__wrapper{
		margin-right:15px;
	}
	h3{
		margin-bottom: 20px;
	}
	.item1,.item2{
		display: flex;
		flex-wrap: wrap;
	}
	.el-table{
		width: 100vh;
	}
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
		}
	}
	.tableclass{
		display: flex;
		margin-top: 10px;
		margin-left: 30px;
		font-size: 16px;
		font-weight: 700;
		p{
			margin-right: 20px;
		}
	}
	.el-table .cell{
		text-align: center !important;
	}
	ul{
		// margin-top: 20px;
		margin-left: 30px;
		list-style: none;
		li{
			margin-top: 20px;
			display: flex;
			align-items: center;
		}
	}
	img{
		width: 25px;
	}
	.mya{
		display: inline-block;
		color: #4b5db9;
		width: 50px;
		text-align: center;
		cursor: pointer;
	}
</style>
<template>
	<div class="common-layout">
	   <el-container>
	     <el-header><Header></Header></el-header>
	     <el-main>
			 <h3>
			 	发票管理
			</h3>
			<div class="item1">
				<el-form-item label="发票抬头" label-width="90">
					<el-input
						v-model="invoicename"
						placeholder="请输入发票抬头"
					>
					</el-input>
				</el-form-item>
				
			 	<el-form-item label="创建时间" label-width="80">
					<el-date-picker
						v-model="createStartTime"
						type="date"
						placeholder="开始时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 120px"
					/>-
					<el-date-picker 
						v-model="createEndTime"
						type="date"
						placeholder="结束时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 120px"
					/>
				</el-form-item>
				<el-form-item label="开票时间" label-width="90">
					<el-date-picker
						v-model="StartTime"
						type="date"
						placeholder="开始时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 120px"
					/>-
					<el-date-picker 
						v-model="EndTime"
						type="date"
						placeholder="结束时间"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						style="width: 120px"
					/>
				</el-form-item>
				
			 	<el-button
			 	type="primary"
				@click="searchinvoice"
			 	>搜索</el-button>
			 	<el-button
			 	type="plain"
				@click="replay"
			 	>重置</el-button>
			</div>
			
			<el-tabs v-model="activeName" class="demo-tabs" @click="goType(activeName)" style="width: 98%; margin: 0 auto;">
				<el-tab-pane label="全部" name=""></el-tab-pane>
				<el-tab-pane label="已开票" name="1"></el-tab-pane>
				<el-tab-pane label="未开票" name="0"></el-tab-pane>
			 </el-tabs>
			 
			<el-table :data="Invoicedata" style="width: 98%; margin: 0 auto;" height="45vh">
				<el-table-column prop="invoiceName" label="发票抬头"></el-table-column>
			    <el-table-column prop="invoiceTypeId" label="抬头类型"></el-table-column>
				<el-table-column prop="invoiceIdentification" label="纳税人识别号"></el-table-column>
				<el-table-column prop="invoiceContent" label="发票内容"></el-table-column>
				<el-table-column prop="invoicePrice" label="开票金额"></el-table-column>
				<el-table-column prop="createTime" label="创建时间"></el-table-column>
				<el-table-column prop="startTime" label="开票时间"></el-table-column>
				<el-table-column label="是否开票">
					<template #default="{ row }">
						{{row.invoiceStatus}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200">
					<template #default="{ row }" style="display: flex;">
						<div style="width: 110px;" v-if="row.show != 1">
							<a class="mya" @click="agree(row.invoice_id)">同意</a>
							<a class="mya" @click="disagree(row.invoice_id)">拒绝</a>
						</div>
						<a class="mya" @click="invoicedetail(row)">详情</a>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog v-model="dialogFormVisible" title="提示" width="500">
				<h3>拒绝理由</h3>
				<el-form :model="form">
			      <el-form-item>
					<el-input
				    v-model="form.content"
				    style="width: 240px;height: 80px;margin: 0 auto;"
				    :rows="4"
				    type="textarea"
				    placeholder="Please input"
					autocomplete="off"
				  />
			      </el-form-item>
			    </el-form>
			    <template #footer>
			      <div class="dialog-footer">
			        <el-button @click="dialogFormVisible = false">取消</el-button>
			        <el-button type="primary" @click="RefuseBilling">确认</el-button>
			      </div>
			    </template>
			  </el-dialog>
			<el-dialog v-model="dialogFormVisible1" title="退款详情" width="400">
			    <el-form style="height: 400px;">
			      <el-form-item >
					<ul>
						<li><span>退款人：</span>{{DetialData.userNname}}</li>
						<li><span>退款商品名称：</span><span>{{DetialData.invoiceContent}}</span></li>
						<li><span>退款金额：</span><span>{{DetialData.invoicePrice}}</span></li>
						<li><span>退款申请时间：</span><span>{{DetialData.createTime}}</span></li>
						<li><span>退款申请结束时间：</span><span>{{DetialData.startTime}}</span></li>
						<li><span>退款状态：</span><span>{{DetialData.invoiceStatus}}</span></li>
						<li><span>备注：</span><span>{{DetialData.invoiceTypeId}}</span></li>
					</ul>
			      </el-form-item>
			    </el-form>
			  </el-dialog>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				>
				</el-pagination>
		 </el-main>
	   </el-container>
	 </div>
</template>
<script setup>
import Header from '@/components/Header.vue'
import { ref,reactive,onMounted} from 'vue'
import {Search,Lock,Calendar} from '@element-plus/icons-vue'
import {
		getInvoicelist,
		getOrderlist,
		updateInvoiceStatus,//发票状态修改
		
	} from "@/api"
	
let pageIndex=ref(1);
let pageSize=5;
let total=ref(0)
const dialogFormVisible = ref(false)
const form = reactive({
	  content: '',
	  delivery: false,
	  type: [],
	  resource: '',
	  desc: '',
	})

const value1= ref('')
const value2 = ref('')
const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 3)
      return [start, end]
    },
  },
]
//获取所搜发票列表
let Invoicedata = ref([])
let invoicename=ref()
const getInvoice = async () => {
	let res = await getInvoicelist({
	siteId:1,
	pageIndex: pageIndex.value,
	pageSize: pageSize,
	// invoiceName: invoicename.value
})
	Invoicedata.value = res.selectInvoice
	for(var i=0;i<Invoicedata.value.length;i++){
		if(Invoicedata.value[i].invoiceStatus=="1"){
			Invoicedata.value[i].invoiceStatus="已开票"
			Invoicedata.value[i].show=1
		}else{
			Invoicedata.value[i].invoiceStatus="未开票"
		}
	}
	// //处理时间
	// Invoicedata.value.forEach((v)=>{
	// 	v.start_time = v.start_time.replace("T"," ")
	// 	v.create_time = v.create_time.replace("T"," ")
	// })
	total.value = res.pageCount
	// console.log(res)
}
//点击标签切换不同类型发票列表
const dataArr=[]
const activeName = ref('')
const goType = async (a) => {
	 // console.log(Number(a))
	let res = await getInvoicelist({
		siteId:1,
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		invoiceStatus:a
	})
	if(a=="0"){
		var filterData=res.selectInvoice.filter(x=>invoiceStatus=="0")
		dataArr.push(filterData)
		Invoicedata.value = dataArr[0]
		for(var i=0;i<Invoicedata.value.length;i++){
			if(Invoicedata.value[i].invoiceStatus=="1"){
				Invoicedata.value[i].show=1
				Invoicedata.value[i].invoiceStatus="已开票"
			}else{
				Invoicedata.value[i].invoiceStatus="未开票"
			}
		}
		// console.log(Invoicedata.value);
	}else{
		Invoicedata.value = res.selectInvoice
		total.value = res.pageCount
		for(var i=0;i<Invoicedata.value.length;i++){
			if(Invoicedata.value[i].invoiceStatus=="1"){
				Invoicedata.value[i].show=1
				Invoicedata.value[i].invoiceStatus="已开票"
			}else{
				Invoicedata.value[i].invoiceStatus="未开票"
			}
		}
	}
		// console.log(res);
	}

//点击搜索
let createStartTime = ref("")
let createEndTime = ref("")
let StartTime = ref("")
let EndTime = ref("")
const searchinvoice=async ()=>{
	let res = await getInvoicelist({
		pageIndex: pageIndex.value,
		pageSize: pageSize,
		invoiceName: invoicename.value,
		createStartTime:createStartTime.value,
		createEndTime:createEndTime.value,
		StartTime:StartTime.value,
		EndTime:EndTime.value
	})
		Invoicedata.value = res.selectInvoice
		for(var i=0;i<Invoicedata.value.length;i++){
			if(Invoicedata.value[i].invoiceStatus=="1"){
				Invoicedata.value[i].show=1
			}
		}
		// //处理时间
		// Invoicedata.value.forEach((v)=>{
		// 	v.start_time = v.start_time.replace("T"," ")
		// 	v.create_time = v.create_time.replace("T"," ")
		// })
		total.value = res.pageCount
		// console.log("搜索",res)
}

//发票状态修改
const agree=async (invoiceid)=>{
	let res = await updateInvoiceStatus({
		invoiceId: invoiceid,
		invoiceStatus: 1,
	})
		// console.log(res)
		getInvoice()
}
//拒绝开票
let refusinvoiceId = ref("")
const disagree=(invoiceid)=>{
	dialogFormVisible.value = true
	refusinvoiceId.value = invoiceid
}
//拒绝中的确定

const RefuseBilling = async ()=>{
	let res = await updateInvoiceStatus({
		invoiceId: refusinvoiceId.value,
		invoiceStatus: 2,
		refuseNotes:form.content
	})
		// console.log(res)
		getInvoice()
	dialogFormVisible.value = false
}
//发票详情
let DetialData = reactive([])
let dialogFormVisible1 = ref(false)
const invoicedetail=(row)=>{
	
	//DetialData = row
	Object.assign(DetialData,row)
	// //处理时间
	// DetialData.forEach((v)=>{
	// 	v.start_time = v.start_time.replace("T"," ")
	// 	v.create_time = v.create_time.replace("T"," ")
	// })
	// console.log("详情",DetialData)
	dialogFormVisible1.value = true
}
//获取分页
const changePage=(page)=>{
	// console.log(page)
	pageIndex.value=page;
	searchinvoice()
}

onMounted(() => {
	getInvoice()
})
const replay=()=>{
		invoicename.value=""
		createStartTime.value=""
		createEndTime.value=""
		StartTime.value=""
		EndTime.value=""
		getInvoice()
	}
</script>
